<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>小米商城</title>
    <!-- <link rel="stylesheet" href="css/xiaomi.css"> -->
</head>

<body>
    <!--头部导航栏-->
    <div class="header">
        <div class="wrap">
            <ul class="header-left">
                <li><a href="#">小米官网</a><span>|</span></li>
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">loT</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">天星数科</a><span>|</span></li>
                <li><a href="#">有品</a><span>|</span></li>
                <li><a href="#">小爱开放平台</a><span>|</span></li>
                <li><a href="#">企业团购</a><span>|</span></li>
                <li><a href="#">资质证照</a><span>|</span></li>
                <li><a href="#">协议规则</a><span>|</span></li>
                <li>
                    <a href="#">下载app</a><span>|</span>
                    <div class="download">
                        <a href="#">
                            <img src="img/二维码.jpg" alt="">
                            <p>小米商城app</p>
                        </a>
                    </div>
                    <div class="triangle"></div>
                </li>
                <li><a href="#">Select Location</a></li>
            </ul>
            <ul class="header-right">
                <li><a href="#">登录</a><span>|</span></li>
                <li><a href="#">注册</a><span>|</span></li>
                <li><a href="#">消息通知</a></li>
                <li class="cart">
                    <a href="#">购物车</a>
                    <div class="cart-list">
                        哦豁！老八 一giao我里giaogiao
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--头部导航栏结束-->
    <!--导航开始-->
    <div class="nav">
        <div class="wrap">
            <div class="logo">
                <a href="#">
                    <img src="img/logo.jpg" alt="">
                </a>
            </div>
            <div class="nav-bar">
                <ul>
                    <li><a href="#">Xiaomi手机</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/小米1.webp" alt="">
                                            </div>
                                            <p>xiaomi 12S Pro</p>
                                            <p>4699元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/小米1.webp" alt="">
                                            </div>
                                            <p>xiaomi 12S Pro</p>
                                            <p>4699元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/小米1.webp" alt="">
                                            </div>
                                            <p>xiaomi 12S Pro</p>
                                            <p>4699元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/小米1.webp" alt="">
                                            </div>
                                            <p>xiaomi 12S Pro</p>
                                            <p>4699元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/小米1.webp" alt="">
                                            </div>
                                            <p>xiaomi 12S Pro</p>
                                            <p>4699元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/小米1.webp" alt="">
                                            </div>
                                            <p>xiaomi 12S Pro</p>
                                            <p>4699元起</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">Redmi手机</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/小米2.webp" alt="">
                                            </div>
                                            <p>Redmi Note 11SE</p>
                                            <p>999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/小米2.webp" alt="">
                                            </div>
                                            <p>Redmi Note 11SE</p>
                                            <p>999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/小米2.webp" alt="">
                                            </div>
                                            <p>Redmi Note 11SE</p>
                                            <p>999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/小米2.webp" alt="">
                                            </div>
                                            <p>Redmi Note 11SE</p>
                                            <p>999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/小米2.webp" alt="">
                                            </div>
                                            <p>Redmi Note 11SE</p>
                                            <p>999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/小米2.webp" alt="">
                                            </div>
                                            <p>Redmi Note 11SE</p>
                                            <p>999元起</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">电视</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/电视3.webp" alt="" width="60%" height="60%">
                                            </div>
                                            <p>小米电视6 65"OLED</p>
                                            <p>6699元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/电视3.webp" alt="">
                                            </div>
                                            <p>小米电视6 65"OLED</p>
                                            <p>6699元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/电视3.webp" alt="">
                                            </div>
                                            <p>小米电视6 65"OLED</p>
                                            <p>6699元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/电视3.webp" alt="">
                                            </div>
                                            <p>小米电视6 65"OLED</p>
                                            <p>6699元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/电视3.webp" alt="">
                                            </div>
                                            <p>小米电视6 65"OLED</p>
                                            <p>6699元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/电视3.webp" alt="">
                                            </div>
                                            <p>小米电视6 65"OLED</p>
                                            <p>6699元</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">笔记本</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/电脑4.webp" alt="">
                                            </div>
                                            <p>Xiaomi Book Pro 16 2022</p>
                                            <p>7399元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/电脑4.webp" alt="">
                                            </div>
                                            <p>Xiaomi Book Pro 16 2022</p>
                                            <p>7399元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/电脑4.webp" alt="">
                                            </div>
                                            <p>Xiaomi Book Pro 16 2022</p>
                                            <p>7399元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/电脑4.webp" alt="">
                                            </div>
                                            <p>Xiaomi Book Pro 16 2022</p>
                                            <p>7399元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/电脑4.webp" alt="">
                                            </div>
                                            <p>Xiaomi Book Pro 16 2022</p>
                                            <p>7399元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/电脑4.webp" alt="">
                                            </div>
                                            <p>Xiaomi Book Pro 16 2022</p>
                                            <p>7399元</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">平板</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/平板5.webp" alt="">
                                            </div>
                                            <p>小米平板</p>
                                            <p>1799元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/平板5.webp" alt="">
                                            </div>
                                            <p>小米平板</p>
                                            <p>1799元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/平板5.webp" alt="">
                                            </div>
                                            <p>小米平板</p>
                                            <p>1799元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/平板5.webp" alt="">
                                            </div>
                                            <p>小米平板</p>
                                            <p>1799元起</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">家电</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/空调7.webp" alt="">
                                            </div>
                                            <p>巨省电 3匹|变频|新一级能效（鎏金版）</p>
                                            <p>5099元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/空调7.webp" alt="">
                                            </div>
                                            <p>巨省电 3匹|变频|新一级能效（鎏金版）</p>
                                            <p>5099元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/空调7.webp" alt="">
                                            </div>
                                            <p>巨省电 3匹|变频|新一级能效（鎏金版）</p>
                                            <p>5099元</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">路由器</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/路由器6.webp" alt="">
                                            </div>
                                            <p>小米路由器Ax9000</p>
                                            <p>1299元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/路由器6.webp" alt="">
                                            </div>
                                            <p>小米路由器Ax9000</p>
                                            <p>1299元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/路由器6.webp" alt="">
                                            </div>
                                            <p>小米路由器Ax9000</p>
                                            <p>1299元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/路由器6.webp" alt="">
                                            </div>
                                            <p>小米路由器Ax9000</p>
                                            <p>1299元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/路由器6.webp" alt="">
                                            </div>
                                            <p>小米路由器Ax9000</p>
                                            <p>1299元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="nav-img-box">
                                                <img src="img/路由器6.webp" alt="">
                                            </div>
                                            <p>小米路由器Ax9000</p>
                                            <p>1299元</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">服务中心</a>
                    </li>
                    <li><a href="#">社区</a>
                    </li>
                </ul>
            </div>
            <div class="search">
                <input type="text" placeholder="Xiaomi Book Pro 16 2022">
                <button type="button">搜索</button>
                <div class="search-list">
                    <a href="#">Xiaomi手机</a>
                    <a href="#">Redmi手机</a>
                    <a href="#">电视</a>
                    <a href="#">笔记本</a>
                    <a href="#">平板</a>
                    <a href="#">家电</a>
                    <a href="#">路由器</a>
                    <a href="#">许运虎</a>
                </div>
            </div>
        </div>
    </div>
    <!--导航结束-->
    <!--banner开始-->
    <div class="banner">
        <div class="wrap">
            <div class="banner-box">
                <div class="banner-box-img">
                    <img src="img/轮播图1.jpg" alt="">
                </div>
                <div class="slide">
                    <ul>
                        <li>
                            <a href="#">手机</a><span><strong>></strong></span>
                            <div class="slide-list">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="#">电视</a><span><strong>></strong></span>
                            <div class="slide-list">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list2.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list2.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list2.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list2.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list2.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="#">笔记本 平板</a><span><strong>></strong></span>
                            <div class="slide-list">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list2.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list3.png" alt="">
                                            <span>小米笔记本</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list3.png" alt="">
                                            <span>小米笔记本</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list3.png" alt="">
                                            <span>笔记本</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list2.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="#">家电</a><span><strong>></strong></span>
                            <div class="slide-list">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list4.jpg" alt="">
                                            <span>冰箱</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list4.jpg" alt="">
                                            <span>大冰箱</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list4.jpg" alt="">
                                            <span>小冰箱</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list4.jpg" alt="">
                                            <span>老冰箱</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list2.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list4.jpg" alt="">
                                            <span>还是冰箱</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="#">出行 穿戴</a><span><strong>></strong></span>
                            <div class="slide-list slide-list1">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list2.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list5.png" alt="">
                                            <span>手表</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list5.png" alt="">
                                            <span>智能手表</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list5.png" alt="">
                                            <span>防水手表</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list5.png" alt="">
                                            <span>表</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="#">智能 路由器</a><span><strong>></strong></span>
                            <div class="slide-list slide-list1">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list2.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list6.png" alt="">
                                            <span>无人机</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list6.png" alt="">
                                            <span>机器狗</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list5.png" alt="">
                                            <span>防水手表</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list6.png" alt="">
                                            <span>表</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list6.png" alt="">
                                            <span>machineDog</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="#">电源 配件</a><span><strong>></strong></span>
                            <div class="slide-list slide-list2">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list7.png" alt="">
                                            <span>飞毛腿</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list7.png" alt="">
                                            <span>移动电源</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list7.png" alt="">
                                            <span>充电宝</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list7.png" alt="">
                                            <span>20000ml</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list6.png" alt="">
                                            <span>表</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list6.png" alt="">
                                            <span>machineDog</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="#">健康 儿童</a><span><strong>></strong></span>
                            <div class="slide-list slide-list1">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list8.png" alt="">
                                            <span>跑步机</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list6.png" alt="">
                                            <span>无人机</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list6.png" alt="">
                                            <span>机器狗</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list5.png" alt="">
                                            <span>防水手表</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list6.png" alt="">
                                            <span>表</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list8.png" alt="">
                                            <span>减肥机</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list6.png" alt="">
                                            <span>machineDog</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list8.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="#">耳机 音响</a><span><strong>></strong></span>
                            <div class="slide-list slide-list1">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list9.png" alt="">
                                            <span>redmi耳机</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list6.png" alt="">
                                            <span>无人机</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list6.png" alt="">
                                            <span>机器狗</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list5.png" alt="">
                                            <span>防水手表</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list6.png" alt="">
                                            <span>表</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list9.png" alt="">
                                            <span>运动耳机</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list6.png" alt="">
                                            <span>machineDog</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list8.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list9.png" alt="">
                                            <span>挂脖耳机</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="#">生活 箱包</a><span><strong>></strong></span>
                            <div class="slide-list slide-list1">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list10.jpg" alt="">
                                            <span>单肩包</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list10.jpg" alt="">
                                            <span>单肩包2</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list10.jpg" alt="">
                                            <span>背包</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list5.png" alt="">
                                            <span>防水手表</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list6.png" alt="">
                                            <span>表</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list9.png" alt="">
                                            <span>运动耳机</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list6.png" alt="">
                                            <span>machineDog</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="img/list1.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list8.png" alt="">
                                            <span>米11 青春活力版</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="img/list10.jpg" alt="">
                                            <span>小学生书包</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--banner结束-->
    <!--广告部分开始-->
    <div class="adv">
        <div class="wrap">
            <div class="adv-aside">
                <ul>
                    <li class="row col"><a href="#">
                            <p>保障服务</p>
                        </a></li>
                    <li class="row col"><a href="#">
                            <p>企业团购</p>
                        </a></li>
                    <li class="row"><a href="#">
                            <p>F码通道</p>
                        </a></li>
                    <li class="col"><a href="#">
                            <p>米粉卡</p>
                        </a></li>
                    <li class="col"><a href="#">
                            <p>以旧换新</p>
                        </a></li>
                    <li><a href="#">
                            <p>话费充值</p>
                        </a></li>
                </ul>
            </div>
            <div class="adv-img"><a href="#"><img src="img/adv1.jpg" alt=""></a></div>
            <div class="adv-img"><a href="#"><img src="img/adv2.jpg" alt=""></a></div>
            <div class="adv-img"><a href="#"><img src="img/adv3.jpeg" alt=""></a></div>
        </div>
    </div>
    <!--广告部分结束-->
    <!--主体开始-->
    <div class="container">
        <div class="wrap">
            <!--手机部分-->
            <div class="phone">
                <div class="home-banner-box">
                    <a href="#">
                        <img src="img/zt1.jpg" alt="">
                    </a>
                </div>
                <h2 class="title">手机
                    <a href="#" class="more">查看更多<i>></i></a>
                </h2>
                <div class="phone-box clear">
                    <div class="phone-box-left">
                        <a href="#"><img src="img/sj1.jpg" alt=""></a>
                    </div>
                    <div class="phone-box-right">
                        <ul>
                            <li class="items">
                                <a href="#"><img src="img/sj2.jpg" alt="" class="goods-img">
                                    <p class="goods-name">xiaomi 11 青春活力版</p>
                                    <p class="goods-desc">轻薄5G，内外皆出彩</p>
                                    <p class="goods-price">1999元起</p>
                                </a>
                            </li>
                            <li class="items">
                                <a href="#"><img src="img/sj3.jpg" alt="" class="goods-img">
                                    <p class="goods-name">Redmi Note 11Pro系列</p>
                                    <p class="goods-desc">Redmi Note 11Pro系列</p>
                                    <p class="goods-price">1799元起</p>
                                </a>
                            </li>
                            <li class="items">
                                <a href="#"><img src="img/sj4.jpg" alt="" class="goods-img">
                                    <p class="goods-name">RedMi note 11 5G</p>
                                    <p class="goods-desc">5000mAh大电量</p>
                                    <p class="goods-price">1199元起</p>
                                </a>
                            </li>
                            <li class="items">
                                <a href="#"><img src="img/sj5.jpg" alt="" class="goods-img">
                                    <p class="goods-name">RedMi note 11 5G</p>
                                    <p class="goods-desc">5000mAh大电量</p>
                                    <p class="goods-price">999元起</p>
                                </a>
                            </li>
                            <li class="items">
                                <a href="#"><img src="img/sj6.jpg" alt="" class="goods-img">
                                    <p class="goods-name">黑鲨4S Pro</p>
                                    <p class="goods-desc">磁动力升降肩键</p>
                                    <p class="goods-price">4799元起</p>
                                </a>
                            </li>
                            <li class="items">
                                <a href="#"><img src="img/sj7.jpg" alt="" class="goods-img">
                                    <p class="goods-name">黑鲨4S</p>
                                    <p class="goods-desc">磁动力升降肩键</p>
                                    <p class="goods-price">2699元起</p>
                                </a>
                            </li>
                            <li class="items">
                                <a href="#"><img src="img/sj8.jpg" alt="" class="goods-img">
                                    <p class="goods-name">xiaomi Civi</p>
                                    <p class="goods-desc">3200万高清质感自拍</p>
                                    <p class="goods-price">2599元起</p>
                                </a>
                            </li>
                            <li class="items">
                                <a href="#"><img src="img/sj9.jpg" alt="" class="goods-img">
                                    <p class="goods-name">xiaomi MIX 4</p>
                                    <p class="goods-desc">CUP全面屏</p>
                                    <p class="goods-price">4199元起 <s class="goods-price-old">4999元</s></p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--手机部分结束-->
            <!--家电部分开始-->
            <div class="elc">
                <h2 class="title">家电</h2>
            </div>
            <div class="ele-box clear">
                <div class="ele-left">
                    <ul>
                        <li class="items"><a href="#"><img src="img/jd1.jpg" alt=""></a></li>
                        <li class="items"><a href="#"><img src="img/jd2.jpg" alt=""></a></li>
                    </ul>
                </div>
                <div class="ele-right">
                    <ul>
                        <li class="items">
                            <a href="#"><img src="img/jd3.jpg" alt="" class="goods-img">
                                <p class="goods-name">小米电视6 65” OLED</p>
                                <p class="goods-desc">小米电视6 65” OLED</p>
                                <p class="goods-price">6999元</p>
                            </a>
                        </li>
                        <li class="items">
                            <a href="#"><img src="img/jd4.jpg" alt="" class="goods-img">
                                <p class="goods-name">小米电视6 至尊版 65英寸</p>
                                <p class="goods-desc">画质新境界</p>
                                <p class="goods-price">7499元 <s class="goods-price-old">7999元</s></p>
                            </a>
                        </li>
                        <li class="items">
                            <a href="#"><img src="img/jd5.jpg" alt="" class="goods-img">
                                <p class="goods-name">小米电视 ES55 2022款</p>
                                <p class="goods-desc">多分区，画质轻旗舰</p>
                                <p class="goods-price">2999元</p>
                            </a>
                        </li>
                        <li class="items">
                            <a href="#"><img src="img/jd6.jpg" alt="" class="goods-img">
                                <p class="goods-name">米家互联网对开门冰箱 540L</p>
                                <p class="goods-desc">新品</p>
                                <p class="goods-price">2899元 <s class="goods-price-old">3699元</s></p>
                            </a>
                        </li>
                        <li class="items">
                            <a href="#"><img src="img/jd7.jpg" alt="" class="goods-img">
                                <p class="goods-name">米家超薄电磁炉</p>
                                <p class="goods-desc">纤薄美学，精准猛火</p>
                                <p class="goods-price">499元</p>
                            </a>
                        </li>
                        <li class="items">
                            <a href="#"><img src="img/jd8.jpg" alt="" class="goods-img">
                                <p class="goods-name">米家集成扫拖机器人</p>
                                <p class="goods-desc">自动倒垃圾</p>
                                <p class="goods-price">2999元</p>
                            </a>
                        </li>
                        <li class="items">
                            <a href="#"><img src="img/jd9.jpg" alt="" class="goods-img">
                                <p class="goods-name">redmi全自动波轮洗衣机</p>
                                <p class="goods-desc">一键操作</p>
                                <p class="goods-price">799元 <s class="goods-price-old">899元</s></p>
                            </a>
                        </li>
                        <li class="items1">
                            <div class="items">
                                <a href="#">
                                    <p class="items1-desc">
                                        <span>米家电烤箱</span>
                                        <br>
                                        <span>299元</span>
                                    </p>
                                    <img src="img/jd10.jpg" alt="" class="items1-img">
                                </a>
                            </div>
                            <div class="items">
                                <a href="#">
                                    <p class="items1-desc">
                                        <span>浏览更多</span>
                                        <br>
                                        <span class="items1-more">热门</span>
                                    </p>
                                    <img src="img/more1.png" alt="" class="items1-img2">
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--家电部分结束-->
            <!--穿戴部分-->
            <div class="phone">
                <h2 class="title">智能穿戴
                    <a href="#" class="more">查看更多<i>></i></a>
                </h2>
                <div class="phone-box clear">
                    <div class="phone-box-left">
                        <a href="#"><img src="img/cd1.jpg" alt=""></a>
                    </div>
                    <div class="phone-box-right">
                        <ul>
                            <li class="items">
                                <a href="#"><img src="img/cd2.jpg" alt="" class="goods-img">
                                    <p class="goods-name">Redmi 手表 2</p>
                                    <p class="goods-desc">AMOLED高清大屏</p>
                                    <p class="goods-price">399元起</p>
                                </a>
                            </li>
                            <li class="items">
                                <a href="#"><img src="img/cd3.jpg" alt="" class="goods-img">
                                    <p class="goods-name">Redmi手表</p>
                                    <p class="goods-desc">35g大屏/多功能nfc/7天长续航</p>
                                    <p class="goods-price">269元 <s class="goods-price-old">299元</s></p>
                                </a>
                            </li>
                            <li class="items">
                                <a href="#"><img src="img/cd4f.jpg" alt="" class="goods-img">
                                    <p class="goods-name">Xiaomi真无线降噪耳机 3 Pro</p>
                                    <p class="goods-desc">动态降噪</p>
                                    <p class="goods-price">699</p>
                                </a>
                            </li>
                            <li class="items">
                                <a href="#"><img src="img/cd5.jpg" alt="" class="goods-img">
                                    <p class="goods-name">RedMi 半入耳式无线蓝牙耳机666666666666</p>
                                    <p class="goods-desc">轻巧入耳</p>
                                    <p class="goods-price">199</p>
                                </a>
                            </li>
                            <li class="items">
                                <a href="#"><img src="img/cd8.jpg" alt="" class="goods-img">
                                    <p class="goods-name">耳机</p>
                                    <p class="goods-desc">磁动力升降肩键</p>
                                    <p class="goods-price">299</p>
                                </a>
                            </li>
                            <li class="items">
                                <a href="#"><img src="img/cd6.jpg" alt="" class="goods-img">
                                    <p class="goods-name">Redmi buds 3青春版</p>
                                    <p class="goods-desc">轻巧无线 持久动听</p>
                                    <p class="goods-price">99</p>
                                </a>
                            </li>
                            <li class="items">
                                <a href="#"><img src="img/cd78.jpg" alt="" class="goods-img">
                                    <p class="goods-name">Redmi AirDots3 Pro</p>
                                    <p class="goods-desc">智能降噪</p>
                                    <p class="goods-price">259</p>
                                </a>
                            </li>
                            <li class="items1">
                                <div class="items">
                                    <a href="#">
                                        <p class="items1-desc">
                                            <span>浏览更多</span>
                                            <br>
                                            <span class="items1-more">热门</span>
                                        </p>
                                        <img src="img/more1.png" alt="" class="items1-img2">
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--穿戴部分结束-->
            <!--视频部分-->
            <div class="video clear">
                <h2 class="title">视频
                    <a href="#" class="more">查看全部<i>></i></a>
                </h2>
                <div class="video-box">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="video-img">
                                    <img src="img/sp1.jpg" alt="">
                                    <div class="play">
                                        <div class="fang"></div>
                                    </div>
                                </div>
                                <div class="video-box-name">
                                    <p class="video-box-name1">2021年春季新品发布会</p>
                                    <p class="video-box-name2"></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="video-img">
                                    <img src="img/sp2.jpg" alt="">
                                    <div class="play">
                                        <div class="fang"></div>
                                    </div>
                                </div>
                                <div class="video-box-name">
                                    <p class="video-box-name1">Redmi 10X系列发布会</p>
                                    <p class="video-box-name2">Redmi 10X系列发布会</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="video-img">
                                    <img src="img/sp3.jpg" alt="">
                                    <div class="play">
                                        <div class="fang"></div>
                                    </div>
                                </div>
                                <div class="video-box-name">
                                    <p class="video-box-name1">小米10青春版发布会</p>
                                    <p class="video-box-name2"></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="video-img">
                                    <img src="img/sp4.jpg" alt="">
                                    <div class="play">
                                        <div class="fang"></div>
                                    </div>
                                </div>
                                <div class="video-box-name">
                                    <p class="video-box-name1">小米10 8K手机拍大片</p>
                                    <p class="video-box-name2"></p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--视频部分结束-->
        </div>
    </div>
    <!--主体结束-->
    <!--页脚开始-->
    <div class="footer">
        <div class="wrap">
            <div class="footer-server">
                <ul>
                    <li><a href="#">预约维修服务</a></li>
                    <li><a href="#">7天无理由退货</a></li>
                    <li><a href="#">15天免费换货</a></li>
                    <li><a href="#">包邮</a></li>
                    <li><a href="#">520余家售后网点</a></li>
                </ul>
            </div>
            <div class="footer-list">
                <ul>
                    <li class="footer-list-span">帮助中心</li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">订单操作</a></li>
                </ul>
                <ul>
                    <li class="footer-list-span">服务支持</li>
                    <li><a href="#">售后政策</a></li>
                    <li><a href="#">自助服务</a></li>
                    <li><a href="#">相关下载</a></li>
                </ul>
                <ul>
                    <li class="footer-list-span">线下门店</li>
                    <li><a href="#">服务网点</a></li>
                    <li><a href="#">小米之家</a></li>
                    <li><a href="#">授权体验店/专区</a></li>
                </ul>
                <ul>
                    <li class="footer-list-span">关于小米</li>
                    <li><a href="#">了解小米</a></li>
                    <li><a href="#">加入小米</a></li>
                    <li><a href="#">投资者关系</a></li>
                    <li><a href="#">企业社会责任</a></li>
                    <li><a href="#">廉洁举报</a></li>
                </ul>
                <ul>
                    <li class="footer-list-span">关注我们</li>
                    <li><a href="#">新浪微博</a></li>
                    <li><a href="#">官方微信</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">公益基金会</a></li>
                </ul>
                <ul>
                    <li class="footer-list-span">特色服务</li>
                    <li><a href="#">F码通道</a></li>
                    <li><a href="#">礼物码</a></li>
                    <li><a href="#">防伪查询</a></li>
                </ul>
                <div class="footer-right">
                    <p class="tel">400-100-5678</p>
                    <p class="time">8:00-18:00(仅收市话费)</p>
                    <a href="#" class="kf">人工客服</a>
                    <p class="follow">
                        关注小米：
                        <a href="#" class="wb"></a>
                        <span class="wx"></span>
                        <img src="img/wx-img.png" alt="" class="wx-img">
                    </p>
                </div>
            </div>
        </div>
        <div class="footer-info">
            <div class="wrap">
                <div class="end-top">
                    <img src="img/logo-mi2.png" alt="">
                    <div class="info-right">
                        <ul class="end-top-p1">
                            <li><a href="#">小米商城</a><span>|</span></li>
                            <li><a href="#">MIUI</a><span>|</span></li>
                            <li><a href="#">米家</a><span>|</span></li>
                            <li><a href="#">米聊</a><span>|</span></li>
                            <li><a href="#">多看</a><span>|</span></li>
                            <li><a href="#">游戏</a><span>|</span></li>
                            <li><a href="#">政企服务</a><span>|</span></li>
                            <li><a href="#">小米天猫店</a><span>|</span></li>
                            <li><a href="#">小米集团隐私政策</a><span>|</span></li>
                            <li><a href="#">小米公司儿童信息保护规则</a><span>|</span></li>
                            <li><a href="#">小米商城隐私政策</a><span>|</span></li>
                            <li><a href="#">小米商城用户协议</a><span>|</span></li>
                            <li><a href="#">问题反馈</a><span>|</span></li>
                            <li><a href="#">Select Location</a></li>
                        </ul>
                        <ul class="end-top-p1">
                            <li><a href="#">北京互联网法院法律服务工作站</a><span>|</span></li>
                            <li><a href="#">中国消费者协会</a><span>|</span></li>
                            <li><a href="#" id="01">北京消费者协会</a></li>
                        </ul>
                        <ul class="end-top-p1 second">
                            <li><span>&copy;</span><a href="#">mi.com</a></li>
                            <li><a href="">京ICP备10046444号</a></li>
                            <li><a href="">京公网安备11010802020134号</a></li>
                            <li><a href="">京网文[2020]0276-042号</a></li>
                            <br>
                            <li><a href="#">（京）网械平台备字(2022)第00005号</a></li>
                            <li><a href="#">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a></li>
                            <li><a href="#">营业执照</a></li>
                            <li><a href="#">医疗器械质量公告</a></li>
                            <br>
                        </ul>
                        <div class="end-top-box">
                            <a href="#"><img src="img/end1.png" alt=""></a>
                        </div>
                        <div class="end-top-box2">
                            <a href="#"><img src="img/end2.png" alt=""></a>
                        </div>
                        <div class="end-top-box3">
                            <a href="#"><img src="img/end3.png" alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="end-bottom">
                    <img src="img/slogan2020.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!--页脚jieshu-->
</body>

</html>
<style>
    /*布局清零*/
    body,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    pre,
    form,
    fieldset,
    legend,
    input,
    textarea,
    button,
    p,
    blockquote,
    th,
    td {
        margin: 0;
        padding: 0;
    }

    body {
        text-align: center;
        height: 100%
    }

    li {
        list-style-type: none;
    }

    a {
        text-decoration: none;
        color: #333333
    }

    img,
    input,
    button {
        border: none;
        vertical-align: middle;
    }

    /*头部导航栏样式*/
    .header {
        z-index: 200;
        position: relative;
        line-height: 40px;
        width: 100%;
        height: 40px;
        background: #333;
        font-size: 12px;
    }

    .wrap {
        width: 1226px;
        margin: 0 auto;
        color: #b0b0b0;
    }

    .header-left {
        float: left;
    }

    .header-right {
        float: right;
    }

    .header li {
        position: relative;
        float: left;
    }

    .header a {
        color: #b0b0b0;
    }

    .header a:hover {
        color: #ffffff;
    }

    .cart:hover {
        background-color: #fff;
    }

    .cart:hover>a {
        color: #ff6700;
    }

    .header span {
        color: #424242;
        margin: 0 6px;
    }

    .cart {
        position: relative;
        width: 120px;
        height: 40px;
        background-color: #424242;
        margin-left: 25px;
        cursor: pointer;
    }

    /*
购物车，下载app下拉思路：
1.绝对定位到相应位置；
2.未触发时隐藏
3.鼠标悬停显示；
*/
    .cart-list {
        /*display: none;*/
        line-height: 100px;
        position: absolute;
        top: 40px;
        right: 0px;
        width: 316px;
        height: 0px;
        overflow: hidden;
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
        transition: all .3s;
        color: #ff6700;
    }

    .cart:hover>.cart-list {
        height: 100px;
    }

    .download {
        width: 124px;
        height: 0px;
        position: absolute;
        top: 40px;
        left: 50%;
        margin-left: -62px;
        overflow: hidden;
        background-color: #fff;
        box-shadow: 0 1px 5px #aaaaaa;
        transition: all .3s;
    }

    .download img {
        width: 90px;
        margin: 18px 0 12px;
    }

    .download>a {
        display: block;
    }

    .download p {
        color: #333333;
        font-size: 14px;
        line-height: 14px;
    }

    .header-left>li:hover>.download {
        height: 148px;
    }

    /*绘制三角形*/
    .triangle {
        display: none;
        position: absolute;
        bottom: 0;
        left: 40%;
        margin-left: -8px;
        width: 0;
        height: 0;
        border-bottom: white 8px solid;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
    }

    .header-left>li:hover>.triangle {
        display: block;
    }

    /*头部导航栏结束*/
    /*导航栏开始*/
    .nav {
        z-index: 100;
        position: relative;
        width: 100%;
        height: 100px;
        background-color: #ffffff;
    }

    .logo {
        margin-top: 22px;
        float: left;
        width: 56px;
        height: 56px;
    }

    .nav-bar {
        float: left;
        width: 874px;
        height: 100px;
        line-height: 100px;
        padding-left: 172px;
        box-sizing: border-box;
    }

    .nav-bar>ul>li>a {
        color: #333333;
    }

    .search {
        position: relative;
        margin-top: 25px;
        float: right;
        width: 296px;
        height: 50px;
        background-color: lavender;
    }

    .logo img {
        width: 100%;
    }

    .nav-bar>ul>li {
        float: left;
        padding: 0 10px;
    }

    .nav-bar>ul>li>a:hover {
        color: #ff6700;
    }

    .nav-bar-list {
        display: none;
        position: absolute;
        left: 0;
        top: 100px;
        width: 100%;
        height: 229px;
        background-color: #fff;
        border-top: 1px solid #e0e0e0;
        box-shadow: 0 3px 4px rgba(0, 0, 0, .18);
    }

    .nav-bar li:hover>.nav-bar-list {
        display: block;
    }

    .nav-bar-list li {
        width: 204px;
        height: 200px;
        padding-top: 22px;
        float: left;
    }

    .nav-img-box {
        width: 100%;
        border-right: 2px solid #e0e0e0;
        box-sizing: border-box;
    }

    .nav-img-box img {
        width: 70%;
        height: 70%;
    }

    .nav-bar-list p {
        font-size: 12px;
        line-height: 20px;
    }

    .nav-bar-list p:nth-of-type(2) {
        color: #ff6700;
    }

    .nav-bar-list li:last-child .nav-img-box {
        border-right: none;
    }

    .search>input {
        float: left;
        width: 223px;
        height: 48px;
        padding: 0 10px;
        border: 1px solid #e0e0e0;
        /*去掉input点击时的外边框*/
        outline: none;
        border-right: none;
        transition: all .2s;
    }

    .search>button {
        border: 1px solid #e0e0e0;
        float: left;
        width: 52px;
        height: 49px;
        transition: all .2s;
        font-size: 16px;
        background-color: #fff;
    }

    .search>button:hover {
        background-color: #ff6700;
        border-color: #ff6700;
        color: white;
    }

    .search>input:hover,
    .search>input:hover+button {
        border-color: #b0b0b0;
    }

    .search>input:focus,
    .search>input:focus+button {
        border-color: #ff6700;
    }

    .search-list {
        background-color: #fff;
        display: none;
        position: absolute;
        left: 0px;
        top: 49px;
        width: 243px;
        height: 240px;
        border: 1px solid #ff6700;
        border-top: none;
    }

    .search>input:focus~.search-list {
        display: block;
    }

    .search-list>a {
        color: #b0b0b0;
        width: 100%;
        height: 30px;
        padding: 6px 15px;
        box-sizing: border-box;
        display: block;
        text-align: left;
    }

    .search-list>a:hover {
        background-color: #fafafa;
        color: #333333;
    }

    /*导航栏结束*/
    /*banner样式开始*/
    .banner,
    .banner-box {
        width: 100%;
        height: 460px;
    }

    .banner-box-img {
        float: right;
        width: 992px;
        height: 460px;
    }

    .banner-box-img>img {
        width: 992px;
        height: 460px;
    }

    .slide {
        position: absolute;
        left: 0px;
        top: 0;
        float: left;
        height: 420px;
        width: 234px;
        background-color: rgba(105, 101, 101, .6);
        padding: 20px 0;
    }

    .banner-box {
        clear: both;
        position: relative;
    }

    .slide>ul>li>a {
        color: white;
        font-size: 14px;
    }

    .slide>ul>li {
        height: 42px;
        line-height: 42px;
        color: #ffffff;
        text-align: left;
        padding-left: 30px;
    }

    .slide span {
        float: right;
        padding-right: 20px;
    }

    .slide>ul>li:hover {
        background-color: #ff6700;
    }

    .slide-list {
        display: none;
        position: absolute;
        left: 234px;
        top: 0;
        width: 992px;
        height: 456px;
        border: 1px solid #e0e0e0;
        border-left: none;
        padding-top: 2px;
        background-color: #fff;
        box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
    }

    .slide>ul>li:hover>.slide-list {
        display: block;
    }

    .slide-list>ul {
        width: 248px;
        float: left;
    }

    .slide-list>ul>li {
        width: 100%;
        height: 76px;
        padding: 20px 0 20px 18px;
        box-sizing: border-box;
    }

    .slide-list>img {
        margin-right: 12px;
    }

    .slide-list>span {
        font-size: 14px;
    }

    .slide-list li:hover span {
        color: #ff6700;
    }

    .slide-list1 {
        width: 744px;
    }

    .slide-list2 {
        width: 496px;
    }

    /*banner样式结束*/
    /*广告开始*/
    .adv {
        width: 100%;
        height: 170px;
        margin: 14px 0 26px;
    }

    .adv-aside {
        float: left;
        width: 228px;
        height: 164px;
        padding: 3px;
        background-color: #5f5750;
    }

    .adv-img {
        margin-left: 14.666px;
        float: left;
        width: 316px;
        height: 170px;
        background-color: lightgoldenrodyellow;
        transition: all .2s linear;
    }

    .adv-img:hover {
        box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
    }

    .adv-img img {
        width: 100%;
    }

    .adv-aside li {
        position: relative;
        width: 76px;
        height: 82px;
        line-height: 82px;
        float: left;
    }

    .adv-aside a {
        display: block;
        color: #ffffff;
        font-size: 12px;
        opacity: .7;
        transition: all .3s;
    }

    .adv-aside a:hover {
        opacity: 1;
    }

    .row:after {
        position: absolute;
        left: 6px;
        bottom: 0;
        width: 64px;
        height: 1px;
        content: "";
        background-color: #665e57;
        /*opacity: .2;*/
    }

    .col:before {
        position: absolute;
        top: 6px;
        left: 76px;
        content: "";
        width: 1px;
        height: 70px;
        background-color: #665e57;
        /*opacity: .2;*/
    }

    /*广告结束*/
    /*主体样式开始*/
    .container {
        overflow: hidden;
        width: 100%;
        background-color: #f5f5f5;
        padding: 4px 0 12px;
        height: 100%;
    }

    .home-banner-box {
        width: 100%;
        height: 120px;
        margin: 22px 0;
    }

    .home-banner-box>a>img {
        width: 100%;
    }

    .title {
        color: #333333;
        font-weight: 200;
        font-size: 22px;
        text-align: left;
        line-height: 58px;
    }

    .more {
        color: #424242;
        font-size: 16px;
        font-weight: 200;
        float: right;
        transition: all .3s;
    }

    .more:hover {
        color: #ff6700;
    }

    .more:hover>i {
        background-color: #ff6700;
    }

    .more>i {
        display: inline-block;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background-color: #b0b0b0;
        line-height: 22px;
        text-align: center;
        color: #ffffff;
        font-size: 18px;
        transition: all .3s;
    }

    .phone-box {
        width: 100%;
        height: 614px;
    }

    .phone-box-left {
        float: left;
        width: 234px;
        height: 614px;
        transition: all .2s;
    }

    .phone-box-right {
        float: left;
        height: 614px;
        width: 992px;
    }

    .items {
        background-color: #fff;
        height: 300px;
        width: 234px;
        float: left;
        margin-bottom: 14px;
        margin-left: 14px;
        transition: all .1s linear;
    }

    .items:hover,
    .phone-box-left:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, .5);
    }

    .phone-box-left img {
        width: 100%;
        height: 100%;
    }

    .goods-img {
        width: 160px;
        margin-top: 20px;
        margin-bottom: 18px;
    }

    .goods-name,
    .goods-desc {
        width: 214px;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .goods-name {
        height: 21px;
        font-size: 14px;
        margin-bottom: 2px;
    }

    .goods-desc {
        height: 18px;
        font-size: 12px;
        margin-bottom: 10px;
        color: #b0b0b0;
    }

    .goods-price {
        font-size: 14px;
        color: #ff6700;
    }

    .goods-price-old {
        color: #b0b0b0;
        margin-left: 7px;
    }

    /*家电部分*/
    .ele-left {
        width: 234px;
        height: 614px;
        float: left;
    }

    .ele-left>ul>li {
        margin-left: 0;
    }

    .ele-left img {
        width: 100%;
    }

    .ele-right {
        float: left;
        height: 614px;
        width: 992px;
    }

    .items1 {
        width: 234px;
        height: 300px;
        float: left;
        margin-left: 14px;
    }

    .items1 div {
        width: 234px;
        height: 143px;
        margin-bottom: 14px;
        background-color: #fff;
        margin-left: 0;
    }

    .items1-desc {
        width: 94px;
        height: 63px;
        float: left;
        display: block;
        margin-left: 30px;
        margin-top: 40px;
        font-size: 14px;
        text-align: left;
    }

    .items1-img {
        float: right;
        width: 80px;
        margin-top: 32px;
        margin-right: 20px;
    }

    .items1-desc span:nth-of-type(2) {
        color: #ff6700;
    }

    .items1-more {
        font-size: 12px;
        font-weight: 100;
    }

    .items1-img2 {
        width: 50px;
        margin-top: 32px;
        margin-right: 20px;
    }

    /*家电部分结束*/
    /*视频部分开始*/
    .video-box li {
        position: relative;
        width: 296px;
        height: 285px;
        background-color: #ffffff;
        float: left;
        margin-left: 14px;
        margin-bottom: 14px;
        transition: all .1s linear;
    }

    .video-box li:hover {
        box-shadow: 0 15px 30px rgba(0, 0, 0, .5);
        transform: translateY(-3px);
    }

    .video-box li:first-child {
        margin-left: 0;
    }

    .video-img img {
        width: 296px;
        height: 180px;
    }

    .video-box-name {
        position: absolute;
        top: 180px;
        left: 0;
        width: 296px;
        height: 105px;
    }

    .video-box-name1,
    .video-box-name2 {
        width: 296px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .video-box-name1 {
        height: 21px;
        margin-top: 25px;
        font-size: 14px;
    }

    .video-box-name2 {
        height: 18px;
        margin-top: 10px;
        font-size: 12px;
        color: #b0b0b0;
    }

    .video-img {
        position: relative;
    }

    .play {
        position: absolute;
        bottom: 10px;
        left: 20px;
        width: 36px;
        height: 24px;
        border: 2px solid #ffffff;
        border-radius: 12px;
        box-sizing: border-box;
        transition: all .2s;
    }

    .fang {
        margin: 4px auto;
        width: 0;
        height: 0;
        border-left: 10px solid #ffffff;
        border-bottom: 7px solid transparent;
        border-top: 7px solid transparent;
    }

    .play:hover {
        background-color: #ff6700;
        border-color: #ff6700;
    }

    /*清除浮动*/
    .clear::after {
        content: "";
        display: block;
        clear: both;
    }

    /*视频部分结束*/
    /*主体样式结束*/
    .footer {
        width: 100%;
        background-color: #fff;
    }

    .footer-server {
        width: 100%;
        height: 25px;
        padding: 27px 0;
        border-bottom: 1px solid #e0e0e0;
    }

    .footer-server li {
        float: left;
        width: 19.8%;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-right: 1px solid #e0e0e0;
    }

    .footer-server li:last-child {
        border-right: none;
    }

    .footer-server a {
        color: #616161;
        transition: all .2s;
    }

    .footer-server a:hover {
        color: #ff6700;
    }

    .footer-list {
        width: 100%;
        height: 172.5px;
        padding: 40px 0 55px;
    }

    .footer-list>ul {
        width: 160px;
        text-align: left;
        float: left;
    }

    .footer-list li a {
        color: #757575;
        font-size: 12px;
        width: 48px;
        transition: all .2s linear;
    }

    .footer-list li a:hover {
        color: #ff6700;
    }

    .footer-list li {
        margin-top: 10px;
    }

    .footer-list-span {
        margin: -1px 0 26px;
        font-size: 14px;
        line-height: 1.25;
        color: #424242;
        width: 160px;
    }

    .footer-right {
        float: right;
        width: 251px;
        height: 111px;
        border-left: 1px solid #e0e0e0;
    }

    .tel {
        position: relative;
        top: 10px;
        line-height: 1px;
        color: #ff6700;
        font-size: 22px;
        margin-bottom: 5px;
    }

    .time {
        position: relative;
        top: 23px;
        font-size: 12px;
        color: #616161;
        margin-bottom: 5px;
    }

    .kf {
        display: block;
        margin: 0 auto;
        width: 118px;
        height: 28px;
        border: 1px solid #f25807;
        color: #ff6700;
        font-size: 12px;
        line-height: 28px;
        transition: all .4s;
        position: relative;
        top: 27px;
    }

    .kf:hover {
        background-color: #f25807;
        color: #ffffff;
    }

    .follow {
        position: relative;
        top: 15px;
        color: #616161;
        font-size: 12px;
        margin-top: 10px;
    }

    .wx,
    .wb {
        position: relative;
        top: 8px;
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-left: 6px;
        background-size: 100%;
        cursor: pointer;
    }

    .wb {
        background-image: url("../img/wb.png");
    }

    .wx {
        background-image: url("../img/wx.png");
    }

    .wb:hover {
        background-image: url("../img/wb@2x (1).png");
    }

    .wx:hover {
        background-image: url("../img/wx@2x.png");
    }

    .wx-img {
        display: none;
        position: absolute;
        top: 30px;
        left: 100px;
        width: 126px;
    }

    .wx:hover+.wx-img {
        display: block;
    }

    /*结尾*/
    .footer-info {
        height: 206px;
        background-color: #f5f5f5;
        padding: 40px 0;
    }

    .end-top {
        position: relative;
        height: 130px;
        width: 100%;
    }

    .end-bottom {
        height: 19px;
        width: 100%;
        margin-top: 30px;
    }

    .end-top img {
        position: absolute;
        left: 0;
        top: 0;
        width: 56px;
        margin-right: 20px;
    }

    .end-top-p1 a {
        color: #757575;
        font-size: 12px;
        line-height: 18px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .info-right {
        width: 1160px;
        text-align: left;
        margin-left: 70px;
    }

    .end-top-p1 li {
        float: left;
    }

    .end-top-p1 a:hover {
        color: #ff6700;
        transition: all .2s;
    }

    /*.end-top-second{*/
    /*    float: left;*/
    /*    width: 1149px;*/
    /*}*/
    .end-top-second a {
        float: left;
        font-size: 12px;
        line-height: 18px;
        color: #b0b0b0;
    }

    .second p {
        font-size: 12px;
        line-height: 18px;
        color: #b0b0b0;
    }

    .second {
        position: absolute;
        top: 40px;
        left: 72px;
    }

    .end-top-box {
        position: absolute;
        top: 100px;
    }

    .end-top-box a {
        float: left;
    }

    .end-top-box2 {
        position: absolute;
        top: 100px;
        left: 130px;
    }

    .end-top-box3 {
        position: absolute;
        top: 100px;
        left: 190px;
    }

    /*结尾*/
</style>